<template>
    <el-row :gutter="32">
        <el-row style="width: 100%;padding-left: 0 !important; display: flex;flex-direction: row; justify-content: space-between;">
            <el-col :span="24">
                <el-breadcrumb style="margin-bottom: 10px;" separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">菜单管理</a></el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="24">
                <el-button type="success" icon="el-icon-refresh" @click="reloadmsg" size="mini">刷新</el-button>
                <el-button type="warning" icon="el-icon-plus" @click="addmsg" size="mini">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button type="primary" icon="el-icon-upload" size="mini">导入</el-button>
            </el-col>
        </el-row>

        <el-table ref="multipleTable" :data="tableData"   default-expand-all tooltip-effect="dark" style="width: 100%;margin-top: 15px;"
            :row-style="{height:'50px'}" :cell-style="{padding:'2px 0'}" :header-cell-style="{background:'#f4f4f5'}"
            row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange">
            <el-table-column prop="date" label="菜单名称">
                <template #default="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="icon" label="图标" width="120" align="center">
                <template #default="scope"><i :class="scope.row.icon"></i></template>
            </el-table-column>
            <el-table-column prop="address" label="排序" width="80" show-overflow-tooltip>
                <template #default="scope">{{ scope.row.ordern }}</template>
            </el-table-column>
            <el-table-column prop="url" label="组件路径" show-overflow-tooltip>
                <template #default="scope">{{ scope.row.route }}</template>
            </el-table-column>
            <el-table-column prop="url" label="菜单类型" show-overflow-tooltip>
                <template #default="scope">{{ scope.row.type==0?'左菜单':'按钮' }}</template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template #default="scope">
                    <el-button size="mini" type="text" v-if="scope.row.id==1" class="el-icon-circle-close" style="color: grey;">不可操作</el-button>
                    <el-button size="mini" v-if="scope.row.id!=1" @click="update(scope.$index, scope.row)" type="text" style="color: #606266;" icon="el-icon-edit"></el-button>
                    <el-button size="mini" v-if="scope.row.id!=1" @click="handleDelete(scope.$index, scope.row)" type="text" style="color: #f55c6c;margin-left: 10px;"
                        icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col>
            <el-pagination background layout="sizes,prev, pager, next,total,jumper" :page-size="pagesize" :total="total"
                style="padding-top: 1.25rem;float: right;" @size-change="handlesizechange" @current-change="handlepagechange"
                :prev-text="上一页" :next-text="下一页" :current-page="currentPage">
            </el-pagination>
        </el-col>
    </el-row>
    <!-- 
  <div>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div> -->
    <el-dialog title="选择图标" v-model="showchooseicon" style="height: 300px;overflow: scroll;">
        <ul class="icon-list">
            <li @click="ruleForm.icon = 'el-icon-platform-eleme';showchooseicon = false"><span><i class="el-icon-platform-eleme"></i></span></li>
            <li @click="ruleForm.icon = 'el-icon-eleme';showchooseicon = false"><span><i class="el-icon-eleme"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-delete-solid';showchooseicon = false"><span><i class="el-icon-delete-solid"></i></span></li>
            <li @click="ruleForm.icon = 'el-icon-delete';showchooseicon = false"><span><i class="el-icon-delete"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-tools';showchooseicon = false"><span><i class="el-icon-s-tools"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-setting';showchooseicon = false"><span><i class="el-icon-setting"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-user-solid';showchooseicon = false"><span><i class="el-icon-user-solid"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-user';showchooseicon = false"><span><i class="el-icon-user"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-phone';showchooseicon = false"><span><i class="el-icon-phone"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-phone-outline';showchooseicon = false"><span><i class="el-icon-phone-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-more';showchooseicon = false"><span><i class="el-icon-more"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-more-outline';showchooseicon = false"><span><i class="el-icon-more-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-star-on';showchooseicon = false"><span><i class="el-icon-star-on"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-star-off';showchooseicon = false"><span><i class="el-icon-star-off"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-goods';showchooseicon = false"><span><i class="el-icon-s-goods"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-goods';showchooseicon = false"><span><i class="el-icon-goods"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-warning';showchooseicon = false"><span><i class="el-icon-warning"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-warning-outline';showchooseicon = false"><span><i class="el-icon-warning-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-question';showchooseicon = false"><span><i class="el-icon-question"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-info';showchooseicon = false"><span><i class="el-icon-info"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-remove';showchooseicon = false"><span><i class="el-icon-remove"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-circle-plus';showchooseicon = false"><span><i class="el-icon-circle-plus"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-success';showchooseicon = false"><span><i class="el-icon-success"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-error';showchooseicon = false"><span><i class="el-icon-error"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-zoom-in';showchooseicon = false"><span><i class="el-icon-zoom-in"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-zoom-out';showchooseicon = false"><span><i class="el-icon-zoom-out"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-remove-outline';showchooseicon = false"><span><i class="el-icon-remove-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-circle-plus-outline';showchooseicon = false"><span><i class="el-icon-circle-plus-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-circle-check';showchooseicon = false"><span><i class="el-icon-circle-check"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-circle-close';showchooseicon = false"><span><i class="el-icon-circle-close"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-help';showchooseicon = false"><span><i class="el-icon-s-help"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-help';showchooseicon = false"><span><i class="el-icon-help"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-minus';showchooseicon = false"><span><i class="el-icon-minus"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-plus';showchooseicon = false"><span><i class="el-icon-plus"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-check';showchooseicon = false"><span><i class="el-icon-check"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-close';showchooseicon = false"><span><i class="el-icon-close"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-picture';showchooseicon = false"><span><i class="el-icon-picture"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-picture-outline';showchooseicon = false"><span><i class="el-icon-picture-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-picture-outline-round';showchooseicon = false"><span><i class="el-icon-picture-outline-round"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-upload';showchooseicon = false"><span><i class="el-icon-upload"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-upload2';showchooseicon = false"><span><i class="el-icon-upload2"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-download';showchooseicon = false"><span><i class="el-icon-download"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-camera-solid';showchooseicon = false"><span><i class="el-icon-camera-solid"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-camera';showchooseicon = false"><span><i class="el-icon-camera"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-video-camera-solid';showchooseicon = false"><span><i class="el-icon-video-camera-solid"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-video-camera';showchooseicon = false"><span><i class="el-icon-video-camera"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-message-solid';showchooseicon = false"><span><i class="el-icon-message-solid"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bell';showchooseicon = false"><span><i class="el-icon-bell"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-cooperation';showchooseicon = false"><span><i class="el-icon-s-cooperation"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-order';showchooseicon = false"><span><i class="el-icon-s-order"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-platform';showchooseicon = false"><span><i class="el-icon-s-platform"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-fold';showchooseicon = false"><span><i class="el-icon-s-fold"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-unfold';showchooseicon = false"><span><i class="el-icon-s-unfold"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-operation';showchooseicon = false"><span><i class="el-icon-s-operation"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-promotion';showchooseicon = false"><span><i class="el-icon-s-promotion"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-home';showchooseicon = false"><span><i class="el-icon-s-home"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-release';showchooseicon = false"><span><i class="el-icon-s-release"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-ticket';showchooseicon = false"><span><i class="el-icon-s-ticket"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-management';showchooseicon = false"><span><i class="el-icon-s-management"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-open';showchooseicon = false"><span><i class="el-icon-s-open"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-shop';showchooseicon = false"><span><i class="el-icon-s-shop"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-marketing';showchooseicon = false"><span><i class="el-icon-s-marketing"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-flag';showchooseicon = false"><span><i class="el-icon-s-flag"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-comment';showchooseicon = false"><span><i class="el-icon-s-comment"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-finance';showchooseicon = false"><span><i class="el-icon-s-finance"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-claim';showchooseicon = false"><span><i class="el-icon-s-claim"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-custom';showchooseicon = false"><span><i class="el-icon-s-custom"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-opportunity';showchooseicon = false"><span><i class="el-icon-s-opportunity"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-data';showchooseicon = false"><span><i class="el-icon-s-data"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-check';showchooseicon = false"><span><i class="el-icon-s-check"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-s-grid';showchooseicon = false"><span><i class="el-icon-s-grid"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-menu';showchooseicon = false"><span><i class="el-icon-menu"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-share';showchooseicon = false"><span><i class="el-icon-share"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-d-caret';showchooseicon = false"><span><i class="el-icon-d-caret"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-caret-left';showchooseicon = false"><span><i class="el-icon-caret-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-caret-right';showchooseicon = false"><span><i class="el-icon-caret-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-caret-bottom';showchooseicon = false"><span><i class="el-icon-caret-bottom"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-caret-top';showchooseicon = false"><span><i class="el-icon-caret-top"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bottom-left';showchooseicon = false"><span><i class="el-icon-bottom-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bottom-right';showchooseicon = false"><span><i class="el-icon-bottom-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-back';showchooseicon = false"><span><i class="el-icon-back"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-right';showchooseicon = false"><span><i class="el-icon-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bottom';showchooseicon = false"><span><i class="el-icon-bottom"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-top';showchooseicon = false"><span><i class="el-icon-top"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-top-left';showchooseicon = false"><span><i class="el-icon-top-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-top-right';showchooseicon = false"><span><i class="el-icon-top-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-arrow-left';showchooseicon = false"><span><i class="el-icon-arrow-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-arrow-right';showchooseicon = false"><span><i class="el-icon-arrow-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-arrow-down';showchooseicon = false"><span><i class="el-icon-arrow-down"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-arrow-up';showchooseicon = false"><span><i class="el-icon-arrow-up"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-d-arrow-left';showchooseicon = false"><span><i class="el-icon-d-arrow-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-d-arrow-right';showchooseicon = false"><span><i class="el-icon-d-arrow-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-video-pause';showchooseicon = false"><span><i class="el-icon-video-pause"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-video-play';showchooseicon = false"><span><i class="el-icon-video-play"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-refresh';showchooseicon = false"><span><i class="el-icon-refresh"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-refresh-right';showchooseicon = false"><span><i class="el-icon-refresh-right"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-refresh-left';showchooseicon = false"><span><i class="el-icon-refresh-left"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-finished';showchooseicon = false"><span><i class="el-icon-finished"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sort';showchooseicon = false"><span><i class="el-icon-sort"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sort-up';showchooseicon = false"><span><i class="el-icon-sort-up"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sort-down';showchooseicon = false"><span><i class="el-icon-sort-down"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-rank';showchooseicon = false"><span><i class="el-icon-rank"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-loading';showchooseicon = false"><span><i class="el-icon-loading"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-view';showchooseicon = false"><span><i class="el-icon-view"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-c-scale-to-original';showchooseicon = false"><span><i class="el-icon-c-scale-to-original"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-date';showchooseicon = false"><span><i class="el-icon-date"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-edit';showchooseicon = false"><span><i class="el-icon-edit"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-edit-outline';showchooseicon = false"><span><i class="el-icon-edit-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder';showchooseicon = false"><span><i class="el-icon-folder"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder-opened';showchooseicon = false"><span><i class="el-icon-folder-opened"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder-add';showchooseicon = false"><span><i class="el-icon-folder-add"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder-remove';showchooseicon = false"><span><i class="el-icon-folder-remove"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder-delete';showchooseicon = false"><span><i class="el-icon-folder-delete"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-folder-checked';showchooseicon = false"><span><i class="el-icon-folder-checked"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-tickets';showchooseicon = false"><span><i class="el-icon-tickets"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document-remove';showchooseicon = false"><span><i class="el-icon-document-remove"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document-delete';showchooseicon = false"><span><i class="el-icon-document-delete"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document-copy';showchooseicon = false"><span><i class="el-icon-document-copy"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document-checked';showchooseicon = false"><span><i class="el-icon-document-checked"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document';showchooseicon = false"><span><i class="el-icon-document"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-document-add';showchooseicon = false"><span><i class="el-icon-document-add"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-printer';showchooseicon = false"><span><i class="el-icon-printer"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-paperclip';showchooseicon = false"><span><i class="el-icon-paperclip"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-takeaway-box';showchooseicon = false"><span><i class="el-icon-takeaway-box"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-search';showchooseicon = false"><span><i class="el-icon-search"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-monitor';showchooseicon = false"><span><i class="el-icon-monitor"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-attract';showchooseicon = false"><span><i class="el-icon-attract"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-mobile';showchooseicon = false"><span><i class="el-icon-mobile"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-scissors';showchooseicon = false"><span><i class="el-icon-scissors"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-umbrella';showchooseicon = false"><span><i class="el-icon-umbrella"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-headset';showchooseicon = false"><span><i class="el-icon-headset"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-brush';showchooseicon = false"><span><i class="el-icon-brush"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-mouse';showchooseicon = false"><span><i class="el-icon-mouse"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-coordinate';showchooseicon = false"><span><i class="el-icon-coordinate"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-magic-stick';showchooseicon = false"><span><i class="el-icon-magic-stick"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-reading';showchooseicon = false"><span><i class="el-icon-reading"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-data-line';showchooseicon = false"><span><i class="el-icon-data-line"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-data-board';showchooseicon = false"><span><i class="el-icon-data-board"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-pie-chart';showchooseicon = false"><span><i class="el-icon-pie-chart"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-data-analysis';showchooseicon = false"><span><i class="el-icon-data-analysis"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-collection-tag';showchooseicon = false"><span><i class="el-icon-collection-tag"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-film';showchooseicon = false"><span><i class="el-icon-film"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-suitcase';showchooseicon = false"><span><i class="el-icon-suitcase"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-suitcase-1';showchooseicon = false"><span><i class="el-icon-suitcase-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-receiving';showchooseicon = false"><span><i class="el-icon-receiving"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-collection';showchooseicon = false"><span><i class="el-icon-collection"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-files';showchooseicon = false"><span><i class="el-icon-files"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-notebook-1';showchooseicon = false"><span><i class="el-icon-notebook-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-notebook-2';showchooseicon = false"><span><i class="el-icon-notebook-2"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-toilet-paper';showchooseicon = false"><span><i class="el-icon-toilet-paper"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-office-building';showchooseicon = false"><span><i class="el-icon-office-building"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-school';showchooseicon = false"><span><i class="el-icon-school"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-table-lamp';showchooseicon = false"><span><i class="el-icon-table-lamp"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-house';showchooseicon = false"><span><i class="el-icon-house"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-no-smoking';showchooseicon = false"><span><i class="el-icon-no-smoking"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-smoking';showchooseicon = false"><span><i class="el-icon-smoking"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-shopping-cart-full';showchooseicon = false"><span><i class="el-icon-shopping-cart-full"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-shopping-cart-1';showchooseicon = false"><span><i class="el-icon-shopping-cart-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-shopping-cart-2';showchooseicon = false"><span><i class="el-icon-shopping-cart-2"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-shopping-bag-1';showchooseicon = false"><span><i class="el-icon-shopping-bag-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-shopping-bag-2';showchooseicon = false"><span><i class="el-icon-shopping-bag-2"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sold-out';showchooseicon = false"><span><i class="el-icon-sold-out"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sell';showchooseicon = false"><span><i class="el-icon-sell"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-present';showchooseicon = false"><span><i class="el-icon-present"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-box';showchooseicon = false"><span><i class="el-icon-box"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bank-card';showchooseicon = false"><span><i class="el-icon-bank-card"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-money';showchooseicon = false"><span><i class="el-icon-money"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-coin';showchooseicon = false"><span><i class="el-icon-coin"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-wallet';showchooseicon = false"><span><i class="el-icon-wallet"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-discount';showchooseicon = false"><span><i class="el-icon-discount"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-price-tag';showchooseicon = false"><span><i class="el-icon-price-tag"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-news';showchooseicon = false"><span><i class="el-icon-news"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-guide';showchooseicon = false"><span><i class="el-icon-guide"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-male';showchooseicon = false"><span><i class="el-icon-male"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-female';showchooseicon = false"><span><i class="el-icon-female"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-thumb';showchooseicon = false"><span><i class="el-icon-thumb"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-cpu';showchooseicon = false"><span><i class="el-icon-cpu"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-link';showchooseicon = false"><span><i class="el-icon-link"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-connection';showchooseicon = false"><span><i class="el-icon-connection"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-open';showchooseicon = false"><span><i class="el-icon-open"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-turn-off';showchooseicon = false"><span><i class="el-icon-turn-off"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-set-up';showchooseicon = false"><span><i class="el-icon-set-up"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chat-round';showchooseicon = false"><span><i class="el-icon-chat-round"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chat-line-round';showchooseicon = false"><span><i class="el-icon-chat-line-round"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chat-square';showchooseicon = false"><span><i class="el-icon-chat-square"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-brush';showchooseicon = false"><span><i class="el-icon-chat-dot-round"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chat-dot-round';showchooseicon = false"><span><i class="el-icon-chat-dot-square"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chat-line-square';showchooseicon = false"><span><i class="el-icon-chat-line-square"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-message';showchooseicon = false"><span><i class="el-icon-message"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-postcard';showchooseicon = false"><span><i class="el-icon-postcard"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-position';showchooseicon = false"><span><i class="el-icon-position"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-turn-off-microphone';showchooseicon = false"><span><i class="el-icon-turn-off-microphone"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-microphone';showchooseicon = false"><span><i class="el-icon-microphone"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-close-notification';showchooseicon = false"><span><i class="el-icon-close-notification"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bangzhu';showchooseicon = false"><span><i class="el-icon-bangzhu"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-time';showchooseicon = false"><span><i class="el-icon-time"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-odometer';showchooseicon = false"><span><i class="el-icon-odometer"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-crop';showchooseicon = false"><span><i class="el-icon-crop"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-aim';showchooseicon = false"><span><i class="el-icon-aim"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-switch-button';showchooseicon = false"><span><i class="el-icon-switch-button"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-full-screen';showchooseicon = false"><span><i class="el-icon-full-screen"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-copy-document';showchooseicon = false"><span><i class="el-icon-copy-document"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-mic';showchooseicon = false"><span><i class="el-icon-mic"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-stopwatch';showchooseicon = false"><span><i class="el-icon-stopwatch"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-medal-1';showchooseicon = false"><span><i class="el-icon-medal-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-medal';showchooseicon = false"><span><i class="el-icon-medal"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-trophy';showchooseicon = false"><span><i class="el-icon-trophy"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-trophy-1';showchooseicon = false"><span><i class="el-icon-trophy-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-first-aid-kit';showchooseicon = false"><span><i class="el-icon-first-aid-kit"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-discover';showchooseicon = false"><span><i class="el-icon-discover"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-place';showchooseicon = false"><span><i class="el-icon-place"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-location';showchooseicon = false"><span><i class="el-icon-location"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-location-outline';showchooseicon = false"><span><i class="el-icon-location-outline"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-location-information';showchooseicon = false"><span><i class="el-icon-location-information"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-add-location';showchooseicon = false"><span><i class="el-icon-add-location"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-delete-location';showchooseicon = false"><span><i class="el-icon-delete-location"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-map-location';showchooseicon = false"><span><i class="el-icon-map-location"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-alarm-clock';showchooseicon = false"><span><i class="el-icon-alarm-clock"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-timer';showchooseicon = false"><span><i class="el-icon-timer"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-watch-1';showchooseicon = false"><span><i class="el-icon-watch-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-watch';showchooseicon = false"><span><i class="el-icon-watch"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-lock';showchooseicon = false"><span><i class="el-icon-lock"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-unlock';showchooseicon = false"><span><i class="el-icon-unlock"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-key';showchooseicon = false"><span><i class="el-icon-key"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-service';showchooseicon = false"><span><i class="el-icon-service"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-mobile-phone';showchooseicon = false"><span><i class="el-icon-mobile-phone"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-bicycle';showchooseicon = false"><span><i class="el-icon-bicycle"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-truck';showchooseicon = false"><span><i class="el-icon-truck"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ship';showchooseicon = false"><span><i class="el-icon-ship"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-basketball';showchooseicon = false"><span><i class="el-icon-basketball"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-football';showchooseicon = false"><span><i class="el-icon-football"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-soccer';showchooseicon = false"><span><i class="el-icon-soccer"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-baseball';showchooseicon = false"><span><i class="el-icon-baseball"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-wind-power';showchooseicon = false"><span><i class="el-icon-wind-power"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-light-rain';showchooseicon = false"><span><i class="el-icon-light-rain"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-lightning';showchooseicon = false"><span><i class="el-icon-lightning"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-heavy-rain';showchooseicon = false"><span><i class="el-icon-heavy-rain"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sunrise';showchooseicon = false"><span><i class="el-icon-sunrise"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sunrise-1';showchooseicon = false"><span><i class="el-icon-sunrise-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sunset';showchooseicon = false"><span><i class="el-icon-sunset"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sunny';showchooseicon = false"><span><i class="el-icon-sunny"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-cloudy';showchooseicon = false"><span><i class="el-icon-cloudy"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-partly-cloudy';showchooseicon = false"><span><i class="el-icon-partly-cloudy"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-cloudy-and-sunny';showchooseicon = false"><span><i class="el-icon-cloudy-and-sunny"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-moon';showchooseicon = false"><span><i class="el-icon-moon"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-moon-night';showchooseicon = false"><span><i class="el-icon-moon-night"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-dish';showchooseicon = false"><span><i class="el-icon-dish"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-dish-1';showchooseicon = false"><span><i class="el-icon-dish-1"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-food';showchooseicon = false"><span><i class="el-icon-food"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-chicken';showchooseicon = false"><span><i class="el-icon-chicken"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-fork-spoon';showchooseicon = false"><span><i class="el-icon-fork-spoon"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-knife-fork';showchooseicon = false"><span><i class="el-icon-knife-fork"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-burger';showchooseicon = false"><span><i class="el-icon-burger"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-tableware';showchooseicon = false"><span><i class="el-icon-tableware"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-sugar';showchooseicon = false"><span><i class="el-icon-sugar"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-dessert';showchooseicon = false"><span><i class="el-icon-dessert"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ice-cream';showchooseicon = false"><span><i class="el-icon-ice-cream"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-hot-water';showchooseicon = false"><span><i class="el-icon-hot-water"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-water-cup';showchooseicon = false"><span><i class="el-icon-water-cup"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-coffee-cup';showchooseicon = false"><span><i class="el-icon-coffee-cup"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-cold-drink';showchooseicon = false"><span><i class="el-icon-cold-drink"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-goblet';showchooseicon = false"><span><i class="el-icon-goblet"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-goblet-full';showchooseicon = false"><span><i class="el-icon-goblet-full"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-goblet-square';showchooseicon = false"><span><i class="el-icon-goblet-square"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-goblet-square-full';showchooseicon = false"><span><i class="el-icon-goblet-square-full"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-refrigerator';showchooseicon = false"><span><i class="el-icon-refrigerator"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-grape';showchooseicon = false"><span><i class="el-icon-grape"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-watermelon';showchooseicon = false"><span><i class="el-icon-watermelon"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-cherry';showchooseicon = false"><span><i class="el-icon-cherry"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-apple';showchooseicon = false"><span><i class="el-icon-apple"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-pear';showchooseicon = false"><span><i class="el-icon-pear"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-orange';showchooseicon = false"><span><i class="el-icon-orange"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-coffee';showchooseicon = false"><span><i class="el-icon-coffee"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ice-tea';showchooseicon = false"><span><i class="el-icon-ice-tea"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ice-drink';showchooseicon = false"><span><i class="el-icon-ice-drink"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-milk-tea';showchooseicon = false"><span><i class="el-icon-milk-tea"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-potato-strips';showchooseicon = false"><span><i class="el-icon-potato-strips"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-lollipop';showchooseicon = false"><span><i class="el-icon-lollipop"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ice-cream-square';showchooseicon = false"><span><i class="el-icon-ice-cream-square"></i><span class="icon-name"></span></span></li>
            <li @click="ruleForm.icon = 'el-icon-ice-cream-round';showchooseicon = false"><span><i class="el-icon-ice-cream-round"></i><span class="icon-name"></span></span></li>
        </ul>
    </el-dialog>
    <el-dialog title="修改" v-model="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单" prop="parent">
                <el-select v-model="ruleForm.parent" placeholder="上级菜单">
                    <template v-for="(value,index) in parentlist" v-bind:key="index">
                        <el-option  v-if="ruleForm.id!=value.id" :label="value.name" :value="value.id"></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input v-model="ruleForm.icon" @click="showchooseicon = true" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="route">
                <el-input v-model="ruleForm.route"></el-input>
            </el-form-item>
            <!-- <el-form-item label="菜单类型">
                <el-radio-group v-model="ruleForm.type">
                  <el-radio label="0" >左菜单</el-radio>
                  <el-radio label="1">按钮</el-radio>
                </el-radio-group>
              </el-form-item> -->
            <el-form-item label="权重" prop="ordern">
                <el-input-number v-model="ruleForm.ordern" @change="handleChange" :min="1" :max="999" label="描述文字"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitform('ruleForm')">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
    const axios = require('axios');
    export default {
        data() {
            console.log("xixi")
            var height = document.documentElement.clientHeight
            return {
                height: height - 222,
                currentPage: 1,
                pagesize: 10,
                total: 10,
                tableData: [],
                selectTabItem: [],
                multipleSelection: [],
                dialogFormVisible: false,
                showchooseicon: false,
                parentlist: [],
                selecticon:"",
                ruleForm: {
                    name: '',
                    icon: '',
                    route: '',
                    ordern: '',
                    parent: 0,
                    id: 0,
                    type:0
                },
                rules: {
                    name: [{
                            required: true,
                            message: '请输入菜单名称',
                            trigger: 'blur'
                        },
                        {
                            min: 1,
                            max: 8,
                            message: '长度在 1 到 8个字符',
                            trigger: 'blur'
                        }
                    ],
                    parent: [{
                        required: true,
                        message: '请选择活动区域',
                        trigger: 'change'
                    }],
                    icon: [{
                        required: true,
                        message: '请选择菜單圖標',
                        trigger: 'change'
                    }],
                    route: [{
                        required: true,
                        message: '请輸入路由地址',
                        trigger: 'change'
                    }]
                }
            }
        },

        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            handlepagechange(val) {
                console.log(val)
                this.$data.currentPage = val
                this.getMsg()
            },
            handlesizechange(val) {
                console.log(val)
                this.$data.pagesize = val
                this.getMsg()
            },
            getMsg() {
                var that = this;
                var url = "http://localhost:8081/manage/menu/page?limit=" + that.$data.pagesize + "&page=" + (that.$data
                    .currentPage - 1)
                axios
                    .get(url)
                    .then(
                        function(res) {
                            console.log(res.data)
                            if (res.data.resultmsg.code == 200) {
                                that.$data.tableData = res.data.resultmsg.data
                                that.$data.parentlist = res.data.resultmsg.data[0].parent
                                that.$data.total = res.data.resultmsg.data[0].total
                            } else if (res.data.resultmsg.code == 400001) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 2000,
                                    center: true
                                }) 
                            } else if (res.data.resultmsg.code == 400002) {
                                that.$message.error({
                                    message: res.data.resultmsg.msg,
                                    type: 'error',
                                    duration: 1000,
                                    center: true
                                });
                                setTimeout(function(){
                                    that.$router.push("login")
                                },)
                            }
                        }
                    )
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            },
            update(index, row) {
                console.log(index)
                console.log(row)
                this.$data.dialogFormVisible = true
                this.$data.ruleForm.name = row.name
                this.$data.ruleForm.icon = row.icon
                this.$data.ruleForm.route = row.route
                this.$data.ruleForm.ordern = row.ordern
                this.$data.ruleForm.parent = row.parentId
                this.$data.ruleForm.id = row.id
                 this.$data.ruleForm.type = row.type
            },
            submitform(ruleForm) {
                var that = this;
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '拼命加载中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        var url = "http://localhost:8081/manage/menu/updatebyid?param=" + encodeURIComponent(
                            encodeURIComponent(JSON.stringify(this.$data.ruleForm)))
                        axios
                            .get(url)
                            .then(
                                function(res) {
                                    console.log(res.data)
                                    if (res.data.resultmsg.code == 200) {
                                        that.$message({
                                            type: 'success',
                                            message: res.data.resultmsg.msg,
                                            center: true
                                        });
                                        that.$data.dialogFormVisible = false
                                        that.getMsg()
                                    }else if (res.data.resultmsg.code == 400001) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 2000,
                                            center: true
                                        }) 
                                    }  else if (res.data.resultmsg.code == 400002) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 1000,
                                            center: true
                                        });
                                    } else if (res.data.resultmsg.code == 400004) {
                                        that.$message.error({
                                            message: res.data.resultmsg.msg,
                                            type: 'error',
                                            duration: 2000,
                                            center: true
                                        });
                                    }

                                }
                            )
                            .catch(function(error) { // 请求失败处理
                                console.log(error)
                                that.$message({
                                    type: 'error',
                                    message: '網絡請求失敗!',
                                    center: true
                                });
                            });
                        loading.close()
                    }
                })
            },
            handleDelete(index, row) {
                var that = this;
                this.$confirm('此操作将永久删除该菜單, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var url = "http://localhost:8081/manage/menu/deletebyid?id=" + row.id
                    axios
                        .get(url)
                        .then(
                            function(res) {
                                console.log(res.data)
                                if (res.data.resultmsg.code == 200) {
                                    that.$message({
                                        type: 'success',
                                        message: '删除成功!',
                                        center: true
                                    });
                                    that.getMsg()
                                }else if (res.data.resultmsg.code == 400001) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 2000,
                                        center: true
                                    }) 
                                }  else if (res.data.resultmsg.code == 400002) {
                                    that.$message.error({
                                        message: res.data.resultmsg.msg,
                                        type: 'error',
                                        duration: 1000,
                                        center: true
                                    });
                                }
                            }
                        )
                        .catch(function() { // 请求失败处理
                            that.$message({
                                type: 'error',
                                message: '網絡請求失敗!',
                                center: true
                            });
                        });

                }).catch(() => {

                });
                console.log(row)
            },
            reloadmsg() {
                this.getMsg()
            },
            addmsg() {
                this.$data.dialogFormVisible = true
                this.$data.ruleForm.name = ""
                this.$data.ruleForm.icon = ""
                this.$data.ruleForm.route = ""
                this.$data.ruleForm.ordern = ""
                this.$data.ruleForm.parent = ""
                this.$data.ruleForm.id = ""
            }
        },
        mounted: function() {
            console.log("haha")
            this.getMsg()
        }
    }
</script>

<style>
    .el-row {
        padding: 0;
    }

    i {
        font-weight: 700 !important;
    }

    .icon-list li {
        list-style: none;
        float: left;
        width: 38px;
        line-height: 32px;
    }

    .el-dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
        overflow: scroll;
        height: 300px;
    }

    .icon-list li i {
        display: block;
        float: left;
        font-size: 32px;
        margin-bottom: 15px;
        color: #606266;
        transition: color .15s linear;
    }

    .el-dialog {
        min-width: 800px !important;
    }
</style>
